<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>收集表单数据</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="vue.js"></script>
  </head>
  <body>
    <div id="root">
      <form>
        <div>
          <!-- v-model.number 收集的时候json中为num -->
          <label for="demo">账号：</label>
          <input type="text" id="demo" v-model.number="account"/>
        </div><br>
        <div>
          <label for="pass">密码：</label>
          <input type="password" id="pass" />
        </div><br>

        <div>
          <label for="pass">密码：</label>
          <input type="password" id="pass" />
        </div><br>
        <div>
          <label for="sexid">性别：</label>
          男<input type="radio" name="sex"  />
          女<input type="radio" name="sex"  />
        </div><br>
        <div>
            <label>爱好：</label>
            抽烟<input type="checkbox" />
            喝酒<input type="checkbox" />
            烫头<input type="checkbox" />
        </div>
        <select name="" id="">
            <option value="">请选择校区</option>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="shenzhen">深圳</option>
            <option value="wuhan">武汉</option>
        </select><br>
        其他信息：<textarea name="" id="" cols="30" rows="10"></textarea><br>
        <input type="checkbox">阅读并接受<a href="">《用户协议》</a>
        <button>提交</button>
      </form>
    </div>
    <script type="text/javascript">
      new Vue({
        el: "#root",
        data: {
          name: "学习",
          account:"",
        },
      });
    </script>
  </body>
</html>
